ebab7d0da53c51438720d60c6e2e467c - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>Document Object Model</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading"><span lang="en">Document Object Model</span></h1>

</header>

</div>

</p>

/* start https://fr.wikipedia.org/ */

.mw-parser-output .entete.informatique{background-image:url("./_mw_/Picto.nfo.png")}

/* end https://fr.wikipedia.org/ */

</style>

<div>Document Object Model</div>

</div>

</p>

</div>

<div class="legend">Représentation DOM d'une page HTML.</div>

<table><caption style="color:#000000;">Informations</caption>

<th scope="row"><a href="D%C3%A9p%C3%B4t_(informatique)" title="Dépôt (informatique)">Dépôt</a></th>

<td>

<span class="wd_p1324"><a rel="nofollow" class="external text" href="https://github.com/whatwg/dom">github.com/whatwg/dom</a></span></td>

</tr>

<tr>

<th scope="row"> Type

</th>

<td>

<span class="wd_p31"><a href="Mod%C3%A8le" title="Modèle">Modèle</a><br><a href="Interface_de_programmation" title="Interface de programmation">Interface de programmation</a></span></td>

</tr>

<tr>

<th scope="row"><a href="Licence_de_logiciel" title="Licence de logiciel">Licence</a></th>

<td>

<span class="wd_p275">Creative Commons Attribution 4.0 International <small>(<a href="https://www.wikidata.org/wiki/Q20007257" class="extiw external" title="d:Q20007257"><span class="indicateur-langue" title="Voir l'élément Wikidata correspondant">d</span></a>)</small></span></td>

</tr>

<tr>

<td>

<span class="wd_p856"><a rel="nofollow" class="external text" href="https://dom.spec.whatwg.org/">dom.spec.whatwg.org</a></span></td>

</tr>

</tbody></table>

</p>

</div>

<p>Le <b>Document Object Model</b> (<b>DOM</b>) est une <a href="Interface_de_programmation" title="Interface de programmation">interface de programmation</a> normalisée par le <a href="W3C" class="mw-redirect" title="W3C">W3C</a>, qui permet à des scripts d'examiner et de modifier le contenu du <a href="Navigateur_web" title="Navigateur web">navigateur web</a><sup id="cite_ref-paul_wang_1-0" class="reference"><a href="#cite_note-paul_wang-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>. Par le DOM, la composition d'un document <a href="HTML" class="mw-redirect" title="HTML">HTML</a> ou <a href="XML" class="mw-redirect" title="XML">XML</a> est représentée sous forme d'un jeu d'objets – lesquels peuvent représenter une fenêtre, une phrase ou un style, par exemple – reliés selon une structure en <a href="Arbre_(informatique)" class="mw-redirect" title="Arbre (informatique)">arbre</a><sup id="cite_ref-paul_wang_1-1" class="reference"><a href="#cite_note-paul_wang-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>. À l'aide du DOM, un script peut modifier le document présent dans le navigateur en ajoutant ou en supprimant des nœuds de l'arbre<sup id="cite_ref-paul_wang_1-2" class="reference"><a href="#cite_note-paul_wang-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>.

</p>

<div class="mw-heading mw-heading2"><h2 id="Description">Description</h2></div>

<p><i>Document Object Model</i> (DOM) signifie « modèle d'objets de document »<sup id="cite_ref-keith_2-0" class="reference"><a href="#cite_note-keith-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>.

</p>

<dl><dt>Modèle</dt>

<dd>Un modèle sert à représenter quelque chose, comme le plan d'une ville. Le DOM représente le document qui se trouve dans le navigateur<sup id="cite_ref-keith_2-1" class="reference"><a href="#cite_note-keith-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>.</dd>

<dt>Objet</dt>

<dd>En <a href="Programmation_informatique" title="Programmation informatique">programmation</a>, un objet est un <a href="Conteneur_(informatique)" title="Conteneur (informatique)">conteneur</a> qui comporte des <a href="Propri%C3%A9t%C3%A9_(informatique)" title="Propriété (informatique)">propriétés</a> et des <a href="M%C3%A9thode_(informatique)" title="Méthode (informatique)">méthodes</a> – qui sont des <a href="Variable_(informatique)" title="Variable (informatique)">variables</a> et des actions concernant ce qu'il représente<sup id="cite_ref-keith_2-2" class="reference"><a href="#cite_note-keith-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>. Les objets du DOM peuvent représenter une fenêtre, un document, une phrase, un style…<sup id="cite_ref-paul_wang_1-3" class="reference"><a href="#cite_note-paul_wang-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></dd>

<dt>Document</dt>

<dd>Le DOM concerne un document, tel qu'une page web affichée dans un navigateur<sup id="cite_ref-keith_2-3" class="reference"><a href="#cite_note-keith-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>. Une page web commence par une balise <code><a href="Doctype" title="Doctype">!DOCTYPE</a></code> suivi de la balise <code><html></code>dans laquelle se trouve le reste du document<sup id="cite_ref-keith_2-4" class="reference"><a href="#cite_note-keith-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>. Le DOM représente le document affiché par une structure en arbre, comportant des nœuds (branches et feuilles)<sup id="cite_ref-keith_2-5" class="reference"><a href="#cite_note-keith-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>.</dd></dl>

<div class="mw-heading mw-heading2"><h2 id="Histoire">Histoire</h2></div>

<p>À l'origine, le DOM (niveau 0, <i>legacy</i>) était un ensemble d'objets mis à disposition par <a href="Netscape_Navigator" title="Netscape Navigator">Netscape Navigator</a>, dont la version 4 parut en <time class="nowrap" datetime="1997-06" data-sort-value="1997-06">juin 1997</time>. <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> 4 suivit en octobre la même année. Ces deux navigateurs intégraient le support du <a href="DHTML" class="mw-redirect" title="DHTML">DHTML</a><sup id="cite_ref-keith_2-6" class="reference"><a href="#cite_note-keith-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>, lequel requérait des extensions alors offertes par le DOM rudimentaire d'alors. Le document pouvait désormais être manipulé à travers le DOM ; cependant le même document n'était pas représenté de la même manière par les deux navigateurs. Ce problème a progressivement disparu avec l'adoption du DOM normalisé par le <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">W3C</a><sup id="cite_ref-keith_2-7" class="reference"><a href="#cite_note-keith-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>. Le DOM (niveau 4) est aujourd'hui incorporé dans la norme <a href="HTML5" title="HTML5">HTML5</a><sup id="cite_ref-paul_wang_1-4" class="reference"><a href="#cite_note-paul_wang-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>.

</p>

<div class="mw-heading mw-heading2"><h2 id="Mise_en_œuvre"><span id="Mise_en_.C5.93uvre"></span>Mise en œuvre</h2></div>

<p>La <a href="Sp%C3%A9cification_(norme_technique)" title="Spécification (norme technique)">spécification</a> du <a href="W3C" class="mw-redirect" title="W3C">W3C</a> stipule les <a href="Objet_(informatique)" title="Objet (informatique)">objets</a> ainsi que les méthodes et les propriétés qu'un <a href="Navigateur_web" title="Navigateur web">navigateur web</a> doit impérativement mettre à disposition<sup id="cite_ref-paul_wang_1-5" class="reference"><a href="#cite_note-paul_wang-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>.

</p><p>Les principales catégories d'objet d'un arbre DOM sont le document, les éléments et les attributs<sup id="cite_ref-paul_wang_1-6" class="reference"><a href="#cite_note-paul_wang-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> :

</p>

<ul><li><code>document</code> expose les informations concernant l'ensemble du document HTML ainsi que la balise <code><html></code><sup id="cite_ref-paul_wang_1-7" class="reference"><a href="#cite_note-paul_wang-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> .</li>

<li>chaque <code>element</code> expose une balise d'un document HTML ou XML, et comporte une propriété <code>attributes</code> qui expose les attributs de la balise. Chaque élément comporte des méthodes permettant d'accéder aux éléments parent, enfant et frères de l'arbre DOM<sup id="cite_ref-paul_wang_1-8" class="reference"><a href="#cite_note-paul_wang-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> .</li>

<li>chaque <code>text</code> contient le texte qui se trouve à l'intérieur d'une balise<sup id="cite_ref-paul_wang_1-9" class="reference"><a href="#cite_note-paul_wang-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> .</li></ul>

<p>Chaque navigateur met en œuvre le DOM dans son langage de programmation. La spécification du DOM est alignée avec le langage <a href="JavaScript" title="JavaScript">JavaScript</a>, reconnu par tous les navigateurs web<sup id="cite_ref-paul_wang_1-10" class="reference"><a href="#cite_note-paul_wang-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>. N'importe quelle partie d'une page web peut ainsi être modifiée par programmation, et le programme fonctionnera sur n'importe quel navigateur web conforme à la norme DOM<sup id="cite_ref-paul_wang_1-11" class="reference"><a href="#cite_note-paul_wang-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>.

</p><p>Techniquement le DOM permet de lire et modifier n'importe quel document utilisant des <a href="%C3%89l%C3%A9ment_HTML" title="Élément HTML">balises</a>, avec n'importe quel langage de programmation qui offre une interface de programmation DOM<sup id="cite_ref-keith_2-8" class="reference"><a href="#cite_note-keith-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>.

</p>

<div class="mw-heading mw-heading2"><h2 id="Évolution_du_DOM_au_sein_des_navigateurs_web"><span id=".C3.89volution_du_DOM_au_sein_des_navigateurs_web"></span>Évolution du DOM au sein des navigateurs web</h2></div>

<p>Avant sa standardisation par le <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">W3C</a>, chaque <a href="Navigateur_web" title="Navigateur web">navigateur web</a> disposait de son propre <i>Document Object Model</i>. Si le langage de base destiné à manipuler les documents web a vite été standardisé autour de <a href="JavaScript" title="JavaScript">JavaScript</a>, il n'en a pas été de même pour la série précise de fonctions à utiliser et la manière de parcourir le document. Par exemple, lorsque <a href="Netscape_Navigator" title="Netscape Navigator">Netscape Navigator</a> préconisait de parcourir un <a href="Tableau_(structure_de_donn%C3%A9es)" title="Tableau (structure de données)">tableau</a> indexé nommé <code><tt>document.layers[]</tt></code>, <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> l'appelait plutôt <code><tt>document.all[]</tt></code>, et ainsi de suite. En pratique, cela obligeait à écrire (au moins) deux versions de chaque morceau de script si l'on voulait rendre son site accessible au plus grand nombre.

</p><p>La standardisation de ces techniques s'est faite en plusieurs étapes, lesquelles étendent chaque fois les possibilités précédentes sans jamais les remettre en cause.

</p>

<p>La première est le DOM Level 1 publié en <a href="1998" title="1998">1998</a> (le niveau 0 étant considéré comme l'implémentation de base figurant dans <a href="Netscape_Navigator" title="Netscape Navigator">Netscape Navigator 2.0</a>), où le W3C a défini une manière précise de représenter un document (en particulier un document <a href="Extensible_Markup_Language" title="Extensible Markup Language">XML</a>) sous la forme d'un arbre. Chaque élément généré à partir du balisage comme, dans le cas de HTML, un paragraphe, un titre ou un bouton de formulaire, y forme un nœud. Est également définie une série de fonctions permettant de se déplacer dans cet arbre, d'y ajouter, modifier ou supprimer des éléments. En plus des fonctions génériques applicables à tout document structuré, des fonctions particulières ont été définies pour les documents HTML, permettant par exemple la gestion des formulaires. Le DOM Level 1 a été disponible dans sa plus grande partie dès les premières versions d'Internet Explorer 5 et de Netscape 6.

</p>

<p>La seconde étape est le DOM Level 2 (publié en <a href="2000" title="2000">2000</a>), à présent constitué de six parties (en plus de <i>Core</i> et <i>HTML</i>, on trouvera <i>Events</i>, <i>Style</i>, <i>View</i> et <i>Traversal and Range</i>). Dans les évolutions de la brique de base (Core), on notera la possibilité d'identifier plus rapidement un nœud ou un groupe de nœuds au sein du document. Ainsi, pour obtenir un élément particulier on ne le recherchera plus dans un tableau comme dans les DOM <a href="Logiciel_propri%C3%A9taire" title="Logiciel propriétaire">propriétaires</a> précédents, mais on appellera la fonction <tt>getElementById()</tt>.

</p>

<p>Le troisième niveau, publié au printemps 2004<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup>, a ajouté :

</p>

<ul><li>le support de <a href="XPath" title="XPath">XPath</a>,</li>

<li>la gestion d'événements clavier,</li>

<li>une interface de <a href="S%C3%A9rialisation" title="Sérialisation">sérialisation</a> de documents XML.</li></ul>

<p>Le quatrième niveau a été publié en décembre 2015. Sa dernière mise à jour date de décembre 2020<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Aspects_techniques">Aspects techniques</h2></div>

<p>DOM permet de représenter la structure d'un document et de ses éléments sous forme d'un arbre. Il est donc préférable de parcourir et de mémoriser l'intégralité du document avant de pouvoir effectuer les traitements voulus. Pour cette raison, les programmes utilisant DOM ont souvent une empreinte mémoire volumineuse en cours de traitement. À l'inverse, à partir d'un arbre DOM donné, il est possible de générer des documents dans le <a href="Langage_de_balisage" title="Langage de balisage">langage de balisage</a> voulu, qui pourront à leur tour être manipulés par l'interface DOM.

</p><p>DOM est utilisé pour pouvoir modifier facilement des documents <a href="Extensible_markup_language" class="mw-redirect" title="Extensible markup language">XML</a> ou accéder au contenu des pages web. Dans les cas ne nécessitant pas de manipuler les documents XML, mais juste de les lire, la méthode <a href="Simple_API_for_XML" title="Simple API for XML">SAX</a> peut également être choisie car elle traite les éléments de façon successive sans charger le document en mémoire. Elle s'impose quand la taille du document excède la capacité de la mémoire.

</p>

<div class="mw-heading mw-heading2"><h2 id="Événements"><span id=".C3.89v.C3.A9nements"></span>Événements</h2></div>

<p>La capture d'un événement consiste à exécuter une action (par exemple un programme en <a href="JavaScript" title="JavaScript">JavaScript</a>) lorsque l'événement surveillé se produit dans le document. Les événements capturables du DOM sont<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> :

</p>

<div class="mw-heading mw-heading3"><h3 id="Événements_page_et_fenêtre"><span id=".C3.89v.C3.A9nements_page_et_fen.C3.AAtre"></span>Événements page et fenêtre</h3></div>

<ul><li><code>onabort</code> — s'il y a une interruption de chargement</li>

<li><code>onerror</code> — en cas d'erreur pendant le chargement de la page</li>

<li><code>onload</code> — après la fin du chargement de la page</li>

<li><code>onbeforeunload</code> — se produit juste avant de décharger la page en cours (par changement de page, en quittant)</li>

<li><code>onunload</code> — se produit lors du déchargement de la page (par changement de page, en quittant)</li>

<li><code>onresize</code> — quand la fenêtre est redimensionnée</li></ul>

<div class="mw-heading mw-heading3"><h3 id="Événements_souris"><span id=".C3.89v.C3.A9nements_souris"></span>Événements souris</h3></div>

<ul><li><code>onclick</code> — sur un simple clic</li>

<li><code>ondblclick</code> — sur un double clic</li>

<li><code>onmousedown</code> — lorsque le bouton de la souris est enfoncé, sans forcément le relâcher</li>

<li><code>onmousemove</code> — lorsque le curseur est déplacé</li>

<li><code>onmouseout</code> — lorsque le curseur sort de l'élément</li>

<li><code>onmouseover</code> — lorsque le curseur se trouve sur l'élément</li>

<li><code>onmouseup</code> — lorsque le bouton de la souris est relâché</li>

<li><code>onscroll</code> — lorsque le scroll de la souris est utilisé</li></ul>

<div class="mw-heading mw-heading3"><h3 id="Événements_clavier"><span id=".C3.89v.C3.A9nements_clavier"></span>Événements clavier</h3></div>

<ul><li><code>onkeydown</code> — lorsqu'une touche est enfoncée</li>

<li><code>onkeypress</code> — lorsqu'une touche est pressée et relâchée</li>

<li><code>onkeyup</code> — lorsqu'une touche est relâchée</li></ul>

<div class="mw-heading mw-heading3"><h3 id="Événements_formulaire"><span id=".C3.89v.C3.A9nements_formulaire"></span>Événements formulaire</h3></div>

<ul><li><code>onblur</code> — à la perte du focus</li>

<li><code>onchange</code> — à la perte du focus, si la valeur a changé</li>

<li><code>onfocus</code> — lorsque l'élément obtient le focus (ou devient actif)</li>

<li><code>onreset</code> — lors de la remise à zéro du formulaire via un bouton ou une fonction <code>reset()</code></li>

<li><code>onselect</code> — quand du texte est sélectionné</li>

<li><code>onsubmit</code> — quand le formulaire est validé via un bouton ou une fonction <code>submit()</code></li></ul>

<div class="mw-heading mw-heading2"><h2 id="DOM_virtuel">DOM virtuel</h2></div>

<div class="mw-heading mw-heading2"><h2 id="Notes_et_références"><span id="Notes_et_r.C3.A9f.C3.A9rences"></span>Notes et références</h2></div>

<li id="cite_note-paul_wang-1"><span class="reference-text"><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> Paul S. Wang, <i>Dynamic Web Programming and HTML5</i>, CRC Press, 2012, <small style="line-height:1em;">(<a href="International_Standard_Book_Number" title="International Standard Book Number">ISBN</a> <span class="nowrap">9781439871829</span>)</small></span>

</li>

<li id="cite_note-keith-2"><span class="reference-text"><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> Jeremy Keith et Jeffrey Sambells, <i>DOM Scripting: Web Design with JavaScript and the Document Object Model</i>, Apress - 2010, <small style="line-height:1em;">(<a href="International_Standard_Book_Number" title="International Standard Book Number">ISBN</a> <span class="nowrap">9781430233893</span>)</small></span>

</li>

<li id="cite_note-3"><span class="mw-cite-backlink"><a href="#cite_ref-3">↑</a> </span><span class="reference-text"><span class="ouvrage">« <a rel="nofollow" class="external text" href="http://www.w3.org/TR/DOM-Level-3-Core/"><cite style="font-style:normal;">Document Object Model (DOM) Level 3 Core Specification</cite></a> », sur <span class="italique">w3.org</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2023-04-10" data-sort-value="2023-04-10">10 avril 2023</time>)</small></span>.</span>

</li>

<li id="cite_note-4"><span class="mw-cite-backlink"><a href="#cite_ref-4">↑</a> </span><span class="reference-text"><span class="ouvrage"><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> « <a rel="nofollow" class="external text" href="http://www.w3.org/TR/dom/"><cite style="font-style:normal;" lang="en">DOM</cite></a> », sur <span class="italique">w3.org</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2023-04-10" data-sort-value="2023-04-10">10 avril 2023</time>)</small></span>.</span>

</li>

<li id="cite_note-5"><span class="mw-cite-backlink"><a href="#cite_ref-5">↑</a> </span><span class="reference-text"><span class="ouvrage" id="2012">« <a rel="nofollow" class="external text" href="http://www.w3.org/TR/DOM-Level-3-Events/"><cite style="font-style:normal;">Document Object Model (DOM) Level 3 Events Specification</cite></a> », <a href="W3C" class="mw-redirect" title="W3C">W3C</a>, <time class="nowrap" datetime="2012-09-06" data-sort-value="2012-09-06">6 septembre 2012</time></span>.</span>

</li>

</ol></div>

</div>

<div class="mw-heading mw-heading2"><h2 id="Liens_externes">Liens externes</h2></div>

<ul><li><cite class="ouvrage" id="site_officiel" style="font-style: normal;"><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> <a rel="nofollow" class="external text" href="http://www.w3.org/DOM/">Site officiel</a></cite></li>

<li><abbr class="abbr indicateur-langue" title="Langue : français">(fr)</abbr> <a rel="nofollow" class="external text" href="https://developer.mozilla.org/fr/docs/Web/API/R%C3%A9f%C3%A9rence_du_DOM_Gecko">Référence du DOM <i>en français</i> sur MDN</a></li>

<li><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> <a rel="nofollow" class="external text" href="http://www.quirksmode.org/dom/intro.html">Introduction au DOM W3C, sur le site Quirksmode.org</a></li>

<li><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> <a rel="nofollow" class="external text" href="https://developer.mozilla.org/en/docs/Gecko_DOM_Reference">Gecko DOM Reference, référence combinée sur DOM Level 1 et 2</a></li></ul>

</div>

<ul id="bandeau-portail" class="bandeau-portail"><li><span class="bandeau-portail-element"><span class="bandeau-portail-icone"><span class="noviewer" typeof="mw:File"></span></span> <span class="bandeau-portail-texte">Portail de l’informatique</span> </span></li> <li><span class="bandeau-portail-element"><span class="bandeau-portail-icone"><span class="noviewer" typeof="mw:File"></span></span> <span class="bandeau-portail-texte">Portail d’Internet</span> </span></li> </ul></div><div><div class="zim-footer">

Cet article est issu de <a class="external text" title="Dernière modification le 2024-09-25" href="https://fr.wikipedia.org/wiki/?title=Document_Object_Model&oldid=218931097">Wikipédia</a>. Sauf mention contraire, le texte est disponible sous <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr">Creative Commons Attribution-Share Alike 4.0</a>. Des conditions supplémentaires peuvent s’appliquer aux fichiers multimédias.

</div>

</div></div>

</div>

</main>

</div>

</body></html>